<template>
<input type="text" v-model="text">
<h1>{{ text }}</h1>
</template>
<script setup lang="ts">


import {ref,customRef} from 'vue';
// 使用场景：
// 可以用来实现防抖函数。
const myRef= (value)=>{
return customRef((trick: any,trigger: () => void)=>{
  let timeout: number | undefined
  return {
   set(newVal){
    clearTimeout(timeout)
    timeout=setTimeout(() => {
    console.log('我拿到的新的值',newVal)
    value=newVal
     trigger() // 让vue从新解析模板
   }, 500);
   }, 
   get(){
    console.log('我拿到了新的值')
    trick() //追踪数据
    return value
   }
  }
})

}
const text=myRef('hello')


</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
